import React, {Component} from "react";
import {Dimensions, Image, ScrollView, Text, TouchableOpacity, View} from "react-native";
import {Modal} from "@ant-design/react-native";
import {observer} from "mobx-react";
import userStatus from "../../common/userStatus";
import {apiDomain, postData} from "../../common/api";

@observer
export default class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bonusPoint: 0,
            userinfo: {}
        }
    }

    toUrl(name, param) {
        this.props.navigation.navigate(name, param)
    }

    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }

    componentDidMount() {
        postData(apiDomain + "/Index/getBonusPoint", {
            id: userStatus.userStatus.id
        }).then(res => {
            this.setState({
                bonusPoint: res.data.bonusPoint
            })
        })
        postData(apiDomain + "/Index/getUserInfo", {
            id: userStatus.userStatus.id
        }).then(res => {
            if (res.code === 200) {
                this.setState({
                    userinfo: res.data
                })
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        })
    }

    render() {
        const {navigation} = this.props

        return (
            <ScrollView style={{backgroundColor: '#e7e7e7'}}>
                <View style={{borderTopColor: 'rgb(221, 221, 221)', borderTopWidth: 1, paddingTop: 10, backgroundColor: "#fff", paddingBottom: 10,}}>
                    <Text style={{fontSize: 24, fontWeight: 'bold', marginLeft: 20, paddingTop: 10}}>{this.state.userinfo.nickname}</Text>
                    <View style={{flex: 1, flexDirection: 'row'}}>
                        <Text style={{marginLeft: 20, color: 'gray', marginTop: 4}}>{this.state.userinfo.phone}</Text>
                    </View>
                </View>
                <View style={{flexDirection: "row", justifyContent: "space-between", paddingTop: 20, paddingBottom: 20, paddingLeft: 30, paddingRight: 30, backgroundColor: '#fff', borderTopColor: '#e7e7e7', borderTopWidth: 1}}>
                    <View>
                        <TouchableOpacity style={{backgroundColor: '#de4635', width: 0.20 * width, height: 0.20 * width, paddingTop: 0.04 * width, paddingLeft: 0.04 * width, borderRadius: 10}} onPress={() => this.toUrl('shop', {})}>
                            <Image source={require('../../img/store.png')} style={{width: 0.12 * width, height: 0.12 * width}}></Image>
                        </TouchableOpacity>
                        <Text style={{textAlign: 'center', marginTop: 5,fontWeight: 'bold', fontSize: 16, color: '#333'}}>Shop</Text>
                    </View>
                    <View>
                        <TouchableOpacity style={{width: 0.20 * width, height: 0.20 * width, paddingTop: 0.04 * width, paddingLeft: 0.04 * width, borderRadius: 10, shadowColor: '#e3e3e3', shadowRadius: 10}} onPress={() => this.toUrl('cart', {})}>
                            <Image source={require('../../img/cart.png')} style={{width: 0.12 * width, height: 0.12 * width}}></Image>
                        </TouchableOpacity>
                        <Text style={{textAlign: 'center', marginTop: 5,fontWeight: 'bold', fontSize: 16, color: '#333'}}>Cart</Text>
                    </View>
                    <View>
                        <TouchableOpacity style={{width: 0.20 * width, height: 0.20 * width, paddingTop: 0.04 * width, paddingLeft: 0.04 * width, borderRadius: 10, shadowColor: '#e3e3e3', shadowRadius: 10}} onPress={() => this.toUrl('orderList', {})}>
                            <Image source={require('../../img/order.png')} style={{width: 0.12 * width, height: 0.12 * width}}></Image>
                        </TouchableOpacity>
                        <Text style={{textAlign: 'center', marginTop: 5,fontWeight: 'bold', fontSize: 16, color: '#333'}}>Order</Text>
                    </View>
                </View>
                <View style={{backgroundColor: '#fff', marginTop: 8}}>
                    <TouchableOpacity style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, paddingBottom: 14, paddingLeft: 20, paddingRight: 20}} onPress={() => this.toUrl('profile', {})}>
                        <Text style={{fontWeight: 'bold', fontSize: 15}}>My Profile</Text>
                        <Image source={require('../../img/arrow-right.png')} style={{width: 14, height: 24}} />
                    </TouchableOpacity>
                    <TouchableOpacity style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, paddingBottom: 14, paddingLeft: 20, paddingRight: 20, borderTopColor: '#e7e7e7', borderTopWidth: 1}}>
                        <Text style={{fontWeight: 'bold', fontSize: 15}}>My Point</Text>
                        <Text style={{fontWeight: 'bold', fontSize: 15}}>{this.state.bonusPoint ? this.state.bonusPoint : 0}</Text>
                    </TouchableOpacity>
                </View>
                <View style={{backgroundColor: '#fff', marginTop: 8}}>
                    <TouchableOpacity style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, paddingBottom: 14, paddingLeft: 20, paddingRight: 20}}>
                        <Text style={{fontWeight: 'bold', fontSize: 15, color: '#de4635'}}>Delete Account</Text>
                        <Image source={require('../../img/arrow-right.png')} style={{width: 14, height: 24}} />
                    </TouchableOpacity>
                </View>
            </ScrollView>
        )
    }
}
const {width} = Dimensions.get('window');
